<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ include file="/WEB-INF/jsp/include.jsp" %>
<%@ include file="/WEB-INF/jsp/header.jsp" %>

<script>
	function check() {
		 var list = $("select");
		 var b = true;
		 list.splice(0, 1);
		 for (var j = 0; j < list.length; j++) {
		 		list[j].name = "list[" + j + "]";
		 		list[j].style.color="black";
		 }
		 if (list.length == 1) {
		 	if (list[0].value == -1) {
				list[0].style.color="red";
				for(var i = 0; i < list[0].options.length; i++)
						list[0].options[i].style.color="black";
				b = false;
			}
		 }
		 if (list.length >= 2) {
		 	for(var j = 0; j < list.length; j++) {
		 		if(list[j].value == -1) {
				  	list[j].style.color="red";
					for(var i = 0; i < list[j].options.length; i++)
						list[j].options[i].style.color="black";
					b = false;
			 	}
		 		else {
			 		for (var i = j + 1; i < list.length; i++) {
					 	if (list[i].value != -1 && list[i].value == list[j].value) {
					 		list[j].style.color="red";
							list[i].style.color="red";
							for(var k = 0; k < list[j].options.length; k++)
								list[j].options[k].style.color="black";
						 	for(var l = 0; l < list[i].options.length; l++)
								list[i].options[l].style.color="black";
		                	b = false;
					 	}
					}
			 	}
			}
		}
		if (list.length < 2) {
			if(document.getElementById("error") == null) {
				var p = document.createElement("P");
				p.id = "error";
				p.innerHTML = "Выберите хотя бы две остановки";
				document.body.appendChild(p);
			} 
			document.getElementById("add").focus();
			b = false;
		}
		else {
			var p = document.getElementById("error"); 
			if (p != null)
				p.remove();
		}
		return b;
	}
</script>
<script type="text/javascript">
$(document).ready(
		function()
		{
			var max = 8;
			var wrapper = $(".selectWrapper");
			var q = document.getElementById('stop0').innerHTML;
			var list = $("select");
			var x = list.length - 2;
			$(".add").click(
					function(e)
					{
						e.preventDefault();
						list = $("select");
						x = list.length - 2;
						if (x < max)
						{
							x++;
							var li = document.createElement("LI");
							li.style.display = "block";
							li.innerHTML = "<select name='list[" + x + "]' style='float: left' id='stop" + x + "'>" + q + "</select><button class='remove' type='button' style='width: 20px'>-</button>";
							var ul = document.getElementById("sel");
  							ul.appendChild(li);
  							var tmp = document.getElementById("stop" + x);
							tmp.selectedIndex = "0";
						}
					});
			$(wrapper).on('click', '.remove',
					function(e)
					{
						e.preventDefault();
						$(this).parent().remove();
						x--;
						var list = $("select");
	             		list.splice(0, 1);
						for (var j = 0; j < list.length; j++) {
							list[j].name = "list[" + j + "]";
							list[j].id = "stop" + j;
						}
					});
		}
);
</script>
<title>Изменение маршрута №${route.number}</title>
<a href="route?id=${route.id}">
	<div class="mybutton">
		Вернуться к маршруту
	</div>
</a>
<br><br><br>
<form id="editForm" action="route_edit?id=${route.id}" method="post" onsubmit="return check()">
	<input name="name" type="text" value="${route.name}" placeholder="Название"
		data-validation="required, length" data-validation-length="max30"/>
	<input name="number" type="number" value="${route.number}" placeholder="Номер"
		data-validation="required, number" data-validation-allowing="range[1;1024]"/>
	<select name="active">
		<c:if test="${route.active == true}">
			<option value="true" selected>Активен</option>
			<option value="false">Неактивен</option>
		</c:if>
		<c:if test="${route.active == false}">
			<option value="true">Активен</option>
			<option value="false" selected>Неактивен</option>
		</c:if>		
	</select>
	<ul class="selectWrapper" id="sel" style="padding: 0; margin: 0">
		<c:forEach items="${rs}" var="s" varStatus="i">
			<li style="display: block">
				<select name="list[${i.index}]" style="float: left" id="stop${i.index}">
					<option value="-1" selected>Выберите остановку</option>
					<c:forEach items="${stops}" var="stop" varStatus="j">
						<c:if test="${stop.id == s.id}">
							<option selected value="${stop.id}">${stop.name}</option>
						</c:if>
						<c:if test="${stop.id != s.id}">
							<option value="${stop.id}">${stop.name}</option>
						</c:if>
					</c:forEach>
				</select>
				<button class="remove" type="button" style="width: 20px">-</button>
			</li>
		</c:forEach>
	</ul>
	<button class="add" id="add" type="button" style="width: 30px">+</button>
	<button class="button" type="submit">Сохранить</button>
</form>
<%@ include file="/WEB-INF/jsp/footer.jsp" %>
